<template>
  <div>
    <div class="subtitleCreat" >
      <div class="content_box">
        <div class="left_box">
          <div class="video_box">
            <!-- <video :src="props.detailItem?.video_url" controls></video> -->
            <AiPhone ref="AiPhoneRef" :video_url="props.detailItem?.video_url"
            :formState="formState"
            ></AiPhone>
          </div>
        </div>

        <div class="right_box">
          <div class="title_step">
            <!-- 步骤条 -->
            <a-steps
              v-model:current="state.current"
              type="navigation"
              size="small"
              @change="changeStep"
            >
              <a-step
                title="字幕编辑"
                sub-title="获取字幕并编辑"
                status="finish"
                description=""
              />
              <a-step
                title="字幕样式"
                sub-title="设置字幕样式"
                status="wait"
                description=""
                :disabled="nextDisabled"
              />
            </a-steps>
          </div>

          <!-- 字幕编辑 -->
          <div class="content">
            <template v-if="state.current == 0 && !state.textList.length">
              <div class="not_textList">
                <a-button
                  type="primary"
                  :loading="loading"
                  @click="identifySubtitles"
                  >识别字幕信息</a-button
                >
              </div>
            </template>

            <div v-show="state.current == 0 && state.textList.length">
              <a-spin tip="字幕生成中..." :spinning="false">
                <div class="btn_controls">
                  <div style="color: rgba(0, 0, 0, 0.45)">
                    <InfoCircleOutlined />
                    <span> 字幕文案调整后，不影响已原有生成好的口播</span>
                  </div>
                  <a-button type="primary" @click="resetTextData">重置</a-button>
                </div>
                <div class="text_list_box">
                  <template v-if="state.visible && state.textList.length">
                    <div
                      class="text_list_item"
                      v-for="(item, index) in state.textList"
                      :key="item.id"
                    >
                      <div class="title_msg">
                        <!-- <span class="text_list_item_title">字幕{{ index + 1 }}</span> -->
                        <span class="text_list_item_time"
                          >{{ item.from + "s" }} - {{ item.to + "s" }}</span
                        >
                      </div>
                      <editor
                        :maxlength="1000"
                        :initText="item?.content || ''"
                        :ref="(el) => (editorRef[index] = el)"
                      ></editor>
                    </div>
                  </template>
                </div>
              </a-spin>
            </div>

            <!-- 字幕样式设置 -->
            <template v-if="state.current == 1">
              <a-spin tip="字幕样式生成中..." :spinning="false">
                <a-row v-if="props.type=='materia'" :gutter="[16,16]" class="btn_controls" style="justify-content:start">
                  <a-col style="font-weight: 600;">
                    请选择保存至文件夹：
                  </a-col>
                  <a-col @click="saveMateria">
                    <a-button>
                      <template #icon>
                        <folder-open-outlined style="color: #5297ff;"/>
                      </template>
                      {{ props.detailItem.folderName }}
                    </a-button>
                  </a-col>
                </a-row>
                <!-- 选择字体 -->
                <div class="font_setting_item" style="margin-top: 20px">
                  <span class="font_style_title">字体设置</span>

                  <!-- 选择字体 -->
                  <div class="font_setting_box" >
                    <!-- 选择字体 -->
                    <a-popover
                      placement="bottom"
                      trigger="click"
                      v-model:visible="state.selectFontPop"
                      :getPopupContainer="
                        (triggerNode) => {
                          return triggerNode.closest('.font_setting_box');
                        }
                      "
                    >
                      <template #content>
                        <!-- :class="{selectFontType == item ? 'font_active' : ''}" -->
                        <div class="select_font_box">
                          <div
                            class="select_font_item"
                            @click="selectFont(item)"
                            :class="{
                              font_active: selectFontcomputed?.id == item.id,
                            }"
                            v-for="item in state.fontList"
                            :key="item.id"
                            :style="{ fontFamily: item.font_family }"
                          >
                            {{ item.name }}
                            <CheckOutlined
                              v-show="selectFontcomputed?.id == item.id"
                              style="font-size: 16px"
                            />
                          </div>
                        </div>
                      </template>
                      <div class="font_settings_style">
                        <span>{{ selectFontcomputed?.name }}</span>
                        <CaretDownOutlined></CaretDownOutlined>
                      </div>
                    </a-popover>

                    <!-- 设置字体大小 -->
                    <div class="font_settings_size" v-if="false">
                      <div class="change_btn" @click="font_size > 1 && font_size--">
                        <MinusOutlined />
                      </div>
                      <a-input-number
                        id="inputNumber"
                        @blur="inputBlur"
                        :controls="false"
                        v-model:value="font_size"
                        :min="1"
                        :defaultValue="16"
                        :max="999"
                      >
                      </a-input-number>
                      <div
                        class="change_btn"
                        @click="font_size < 999 && font_size++"
                      >
                        <PlusOutlined />
                      </div>
                    </div>
                    <!-- 分割线 -->
                    <div class="split_line"></div>
                    <!-- 设置字体颜色 -->
                    <div class="color_settings_box" >
                      <!-- 禁用状态 -->
                      <!-- <template v-if="activeFlowerName !== ''">
                <div class="settings_color disable_settings_color">
                  <cu-icon type="icon-a-copy"></cu-icon>
                  <div class="color_line" :style="{ background: '#ccced0' }"></div>
                </div>
              </template> -->

                      <a-tooltip placement="top">
                        <template #title>
                          <span>字体颜色</span>
                        </template>
                        <div
                          class="settings_color"
                          @click="colorPickerClick('font', $event)"
                        >
                          <cu-icon type="icon-a"></cu-icon>
                          <div
                            class="color_line"
                            :style="{
                              background: formState.color || 'transparent',
                            }"
                          ></div>
                        </div>
                      </a-tooltip>
                      <!-- 设置背景颜色 -->
                      <a-tooltip placement="top">
                        <template #title>
                          <span>背景颜色</span>
                        </template>
                        <div
                          class="settings_color"
                          @click="colorPickerClick('bgc', $event)"
                        >
                          <!-- 删除按钮 -->
                          <cu-icon
                            type="icon-shanchu2-copy"
                            class="del_bgc"
                            v-show="!!formState.bg_color"
                            @click.stop="clearBgc"
                          ></cu-icon>
                          <cu-icon
                            style="font-size: 14px"
                            type="icon-yansekuai"
                          ></cu-icon>
                          <div
                            class="color_line"
                            :style="{
                              background: formState.bg_color || 'transparent',
                            }"
                          ></div>
                        </div>
                      </a-tooltip>
                      <!-- 设置颜色的元素本体 -->
                    </div>

                    <!-- 分割线 -->
                    <div class="split_line"></div>

                    <!-- 字体粗细倾斜和排列方式 -->
                    <div class="font_settings_style_control" style="gap: 5" >
                      <a-tooltip placement="top">
                        <template #title>
                          <span>字体加粗</span>
                        </template>
                        <div
                          class="font_settings_style_itme"
                          style="padding: 2 0px"
                          :class="{ is_active: formState.bold == 1 }"
                          @click="changeBold"
                        >
                          <cu-icon type="icon-B"></cu-icon>
                        </div>
                      </a-tooltip>

                      <a-tooltip placement="top">
                        <template #title>
                          <span>字体倾斜</span>
                        </template>
                        <div
                          @click="changeItalic"
                          :class="{ is_active: formState.italic == 1 }"
                          class="font_settings_style_itme"
                        >
                          <cu-icon type="icon-T-qingxie"></cu-icon>
                        </div>
                      </a-tooltip>
                        <!-- 对齐方式 -->
                                <!-- <a-tooltip placement="top" v-if="false">
                            <template #title>
                            <span>对齐方式</span>
                            </template>
                            <a-popover placement="bottom" trigger="click" :getPopupContainer="(triggerNode) => {
                            return triggerNode.closest('.font_settings_style_control');
                            }
                            ">
                            <template #content>
                                <div class="select_alignment">
                                <span :class="{
                                    active_alignment:formState.alignment == i.type,
                                }" v-for="i in alignmentArr" :key="i.id" @click="selectAlignmentPop(i)">
                                    <cu-icon :type="i.icon"></cu-icon>
                                </span>
                                </div>
                            </template>
                            <div class="font_settings_style_itme alignment">
                                <cu-icon :type="alignmentArr.find(ele=>ele.type==formState.alignment)?.icon" style="color: #333; margin-right: 15px"></cu-icon>
                                <CaretDownOutlined style="color: #333"></CaretDownOutlined>
                            </div>
                            </a-popover>
                        </a-tooltip> -->
                    </div>
                  </div>
                </div>
                <!-- 颜色选择组件 -->
                <color-picker
                  id="colorPicker"
                  modebar="none"
                  :show-opacity="false"
                  :set-color="setColor"
                  @finish="colorChange"
                  :btn-style="{
                    width: '60px',
                    height: '32px',
                    marginLeft: 'auto',
                    display: 'none',
                  }"
                />

                <!-- 字体大小 -->
                <div class="font_setting_item">
                  <!-- size="small" -->
                  <span class="font_style_title">字体大小</span>
                  <a-input-number
                    style="width: 130px"
                    id="inputNumber"
                    v-model:value="formState.font_size"
                    :min="10"
                    :max="100"
                  />
                </div>

                <!-- 选择花字 -->
                <div class="font_setting_item">
                  <span class="font_style_title">选择花字</span>
                  <a-tabs
                    v-model:activeKey="formState.flower_type"
                    @change="tabChange"
                  >
                    <a-tab-pane key="effectColor" tab="推荐花字">
                      <div class="font_style_box">
                        <div
                          class="font_style_content_box"
                          :class="{ active_height: state.isFlod == false }"
                        >
                          <!-- 可选项 -->
                          <div
                            @click="selectFontStyle(i)"
                            class="font_style_content_item"
                            :style="{
                              background: i.boxcolor || '#e2e2e2',
                            }"
                            :class="{
                              active_font_style: formState.flower_id == i.id,
                            }"
                            v-for="i in state.flowerAliArr"
                            :key="i.id"
                          >
                            <img
                              class="font_img"
                              :src="i.image"
                              alt=""
                              style="
                                width: 200px;
                                height: 51px;
                                object-fit: contain;
                              "
                            />
                            <!-- <img :src="i.image" alt="" style="width: 51px; object-fit: cover;"> -->
                          </div>
                        </div>
                        <!-- 折叠 -->
                        <div
                          class="folding_panel"
                          @click="state.isFlod = !state.isFlod"
                          v-if="state.flowerArr?.length > 20"
                        >
                          <span>{{ state.isFlod ? "收起更多" : "展开更多" }}</span>
                          <CaretDownOutlined v-if="!state.isFlod" />
                          <caret-up-outlined v-else />
                        </div>
                      </div>
                    </a-tab-pane>

                    <a-tab-pane key="system" tab="系统花字">
                      <div class="font_style_box">
                        <div
                          class="font_style_content_box"
                          :class="{ active_height: state.isFlod == false }"
                        >
                          <!-- 可选项 -->
                          <div
                            @click="selectFontStyle(i)"
                            :style="{
                              background: i.boxcolor || '#e2e2e2',
                            }"
                            class="font_style_content_item"
                            :class="{
                              active_font_style: formState.flower_id == i.id,
                            }"
                            v-for="i in state.flowerArr"
                            :key="i.name"
                          >
                            <p
                              class="font_style_content_item_text"
                              :style="getStyle(i)"
                            >
                              花字
                            </p>
                            <!-- <img :src="i.image" alt="" style="width: 51px; object-fit: cover;"> -->
                          </div>
                        </div>
                        <!-- 折叠 -->
                        <div
                          class="folding_panel"
                          @click="state.isFlod = !state.isFlod"
                          v-if="state.flowerArr?.length > 20"
                        >
                          <span>{{ state.isFlod ? "收起更多" : "展开更多" }}</span>
                          <CaretDownOutlined v-if="!state.isFlod" />
                          <caret-up-outlined v-else />
                        </div>
                      </div>
                    </a-tab-pane>
                  </a-tabs>
                </div>
              </a-spin>
            </template>
          </div>
        </div>
      </div>
    </div>
    <loadingMask ref="loadingMaskRef" :text="'字幕获取中...'" :zIndex="1001" :loading="loading" />

    
  <!-- 保存素材库 -->
  <MaterialsModule  ref="materials" :requestType="true" jobCategory="videoSplit" :material_type="'video'" :isFlaking="false" :visible="state.saveVisible" @selfRequest="selfRequest"
    @onCancel="onMaterialCancel" />

  <!-- 充值弹窗 -->
  <vipModal :visible="vipVisible" @close="vipVisible = false" />
  </div>
</template>

<script setup>
import { reactive, computed, ref, nextTick, watch } from "vue";
import request from "@/common/utils/request";
import {
  CaretDownOutlined,
  PlusOutlined,
  MinusOutlined,
  CheckOutlined,
  CaretUpOutlined,
  InfoCircleOutlined,
  FolderOpenOutlined
} from "@ant-design/icons-vue";
import utils from "@/common/utils/utils.js";
// 充值弹窗
import vipModal from "@/socialMedia/Vip/vipModal.vue";
// 充值弹窗开关
const vipVisible = ref(false);
// 颜色选取
import ColorPicker from "colorpicker-v3";
import "colorpicker-v3/style.css";
import { message } from "ant-design-vue";

import MaterialsModule from "@/views/shotstack/components/MaterialsModule/index.vue";

// loading 遮罩
import loadingMask from "@/components/loadingMask/index.vue";
const loadingMaskRef = ref();

// 富文本
import editor from "@/views/shotstack/digitalHuman/AIdigitalHumanCreatVideo/Components/TextEditor/index.vue";
const editorRef = ref([]);

// 手机组件
import AiPhone from '@/views/shotstack/components/AiPhone/index.vue'
const AiPhoneRef = ref()

const props = defineProps({
  detailItem: {
    type: Object,
    default: ()=>{
        return {}
    },
  },
  textList:{
    type: Array,
    default: ()=>{
        return []
    },
  },
  fontList:{
    type: Array,
    default: ()=>{
        return []
    },
  },
  presetStylesList:{
    type: Array,
    default: ()=>{
        return []
    }
  },
  current:{
    type: [Number,String],
    default: 0
  },
  // 通知子组件是否提交数据
  successData:{
    type: Boolean,
    default: false
  },
  // 区分哪个模块
  type:{
    type:String,
    default:''
  },
  nextNum:{
    type: [Number,String],
    default: 0
  }
});
const emit = defineEmits(['stepChange','successChange','nextDisabledChange','saveVisible']);

const getBaseFormData = () => {
  return {
    font_family: '',
    font_name: '',
    font_url: '',
    font_size: 52,
    font_path:'',
    // 字体颜色
    color: '#000000',
    bg_color: '',
    bold: 0,
    italic:0,
    alignment: "center",

    // 花字id
    flower_id: '',
    flower_type:'effectColor',// system 是我们自己的花字， 'effectColor' 表示是用的阿里云的
}
}

const formState = reactive(getBaseFormData())
// 拾色器默认颜色
const setColor = ref(formState.color);
// 清除选择的背景色
const clearBgc = () => {
    formState.bg_color = "";
};


// 获得对应项的字体样式
const getStyle = (item) => {
  // debugger
  return {
    color: item.fontcolor,
    "-webkit-text-stroke": item.bordercolor ? `1px ${item.bordercolor}` : "",
  };
};

const openType = ref('')
// 打开拾色器弹窗
const colorPickerClick = (type, ev) => {
  // debugger
  // 字体的颜色默认值为黑色, 背景色默认值为透明
    type == "font" ? (setColor.value = "#000000") : (setColor.value = "");
    // 存放打开的类型
    openType.value = type
  const target = ev.target;
  console.log(ev, "事件对象");
  // 获取元素的位置信息，getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
  const rect = target.getBoundingClientRect();
  // 计算元素右侧边缘到视口左侧的距离
  const dom = document.querySelector(".zs-color-picker-btn-color");
  dom.click();

  // 获取视口的宽度
  const viewportWidth = window.innerWidth;

  // 计算元素距离屏幕右侧的距离
  const rightDistanceToViewportLeft = rect.right;
  const rightDistanceToViewportRight = +(
    viewportWidth - rightDistanceToViewportLeft
  ).toFixed(0);
  const top = (rect.top + 30).toFixed(0);
  // 修改弹窗的位置为当前点击元素的位置下方
  const pickerDom = document.querySelector(".zs-color-picker-panel");
  pickerDom.style.position = "fixed";
  pickerDom.style.top = top + "px";
  pickerDom.style.right = rightDistanceToViewportRight + "px";
};


// 选择字体
const selectFont = (item) =>{
    // formState.font_family = item.font_family
    let data = {
        font_name: item.name,
        font_path: item.material_path,
        font_style: item.font_style,
        font_family: item.font_family,
        font_url: item.material_url,
    }
    Object.assign(formState, data)
}

// 取色器选择颜色
const colorChange = (e) => {
    console.log(e, "颜色改变");
    console.log(openType.value,'openType 打开的方式');
    
    if (openType.value == "font") {
    formState.color = e.hex
    } else if (openType.value == "bgc") {
        formState.bg_color = e.hex
        subTitle.value.bg_color = e.hex;
    }
};

// 修改字体粗细
const changeBold = () => {
  formState.bold == 1
    ? (formState.bold = 0)
    : (formState.bold = 1);
};

// 修改字体倾斜
const changeItalic = () => {
  formState.italic == 1
    ? (formState.italic = 0)
    : (formState.italic = 1);
};

// 选择花字
const selectFontStyle = (item) => {
    console.log(item, '选择的花字');
    if (formState.flower_id == item.id) {
        formState.flower_id = ''
        return
    }
    formState.flower_id = item.id
}




const state = reactive({
    visible: true,
    // 系统花字列表
    flowerArr: [],
    // 阿里花字列表
    flowerAliArr: [],
    // 字体列表
    fontList:[],
    // 折叠样式
    isFlod: false,
    flower_type: 'effectColor',
    // 选择字体开关
  selectFontPop: false,
    // 编辑的 item
    detailItem: props.detailItem,
    // 头部进度条
  current: 0,

  // 字幕编辑列表
  textList: props.textList,
  // 字幕列表 基础数据, 用于重置时使用
  baseTextList: props.textList,

  // 提交 需要的任务id
  job_id: '',
  //   [...Array(5)].map((ele, index) => {
  //   return {
  //     text: '字幕内容' + index,
  //     id: index,
  //   }
  // })
  saveVisible:false,
  materiaData:{}
})

// 选择的字体
const selectFontcomputed = computed(() => {
    const find = state.fontList.find(ele =>  ele.font_family == formState.font_family)
    return find || {}
})

const loading=ref(false)

// 识别字幕
const identifySubtitles = async () => {
  if(props.type == 'materia'){
    pointConsumption().then((res)=>{
      getCaptionsTts()
    })
    return
  }
  getCaptionsTts()
}

// 素材库视频-获取字幕信息
const getCaptionsTts = async () => {
  loading.value = true
  try {
    let url = '/human/video/video/ars/tts'
    let params ={
      id: props.detailItem.id,
      video_url: props.detailItem.video_url,
    }

    // 判断素材库参数
    if(props.type=='materia'){
      url = '/user/shotstack/media/captionsTts'
      params = {}
      params.multimedia_id = props.detailItem.id
      params.video_url = props.detailItem.video_url
    }
    console.log(url,'materiamateriamateria');
    const res = await request.post(
        "/work_ai",
        url,
    {
      ...params
    }
  );
    console.log(res, '提取字幕开始');
  // 存储到公共变量中
  state.job_id = res?.result?.job_id
  const job_id = res?.result?.job_id
  if (!job_id) throw new Error('字幕识别失败!')

  const getRes = () => {
    return new Promise(async (resolve, reject) => {
      const fn = async() => {
        let url = '/human/video/video/ars/tts/status'

        let params ={
          id: props.detailItem.id,
        }
        // 判断素材库参数
        if(props.type =='materia'){
          url = '/user/shotstack/media/captionsTts/status'
          params = {}
          params.multimedia_id = props.detailItem.id
        }
          const getJobRes = await request.post(
            "/work_ai",
            url,
          {
            ...params,
            job_id,
          }
        );  
        console.log(getJobRes, '提取字幕结果');

        if(getJobRes?.result?.status == 'Finished'){
          state.textList = getJobRes.result?.output || []
          emit('nextDisabledChange',state.textList)
          state.baseTextList = JSON.parse(JSON.stringify(state.textList))
          loading.value = false
          resolve()
          return
        } else {
          setTimeout(() => {
            fn() 
          }, 1500)
        }
      }

     fn()
    })
  }
  await getRes()
  } catch (error) {
    loading.value = false
  } 
}

// 点数信息
const countData = ref(null)
// 点数消耗查询
const pointConsumption = (number = 1) => {

return new Promise(async(resolve, reject) => {
  let url ="/human/video/aiAsr/point/get"
  let params ={
    number,
  }
  if(props.type == 'materia'){
    url = "/user/shotstack/media/point/get"
    params.type = 'business_module_multimedia_text_point'
    params.key = 'extract_video_point'
  }
  const res = await request.get(
    "/work_ai",
    url,
    params
  );
  countData.value = res
  if (countData.value?.usable != 1) {
      // 打开充值弹窗
    vipVisible.value = true
    reject('点数不足')
    return
  }
  // 获取消耗提示词内容
  const content = utils.useText(countData.value)

  try {      
    // 打开积分消耗提示
    await utils.kd({
      content,
      res:countData.value
    })
    resolve('点数足够,同意消耗')
  } catch (error) {
    reject('不同意消耗')
  }
})
}

// 步骤条 下一步的禁用逻辑
const nextDisabled = computed(() => {
    if(!state.textList.length) return true
    return false
})


// 重置文本数据
const resetTextData = () => {
  state.textList = JSON.parse(JSON.stringify(state.baseTextList))
  nextTick(() => {
    state.textList.forEach((item, index) => {
      // 重置富文本数据
      editorRef.value[index].setContent(item?.content)
    })
  })
}


const changeStep=(current)=>{
    emit('stepChange',current)
}

// 保存素材库
const saveMateria= ()=>{
  state.saveVisible = true
}


  // 选择素材库
  const materials =ref(null)
  const selfRequest=(data)=>{
    state.materiaData = data
    props.detailItem.folderName = data.memberName
    setTimeout(()=>{
      onMaterialCancel()
    },50)
  }

  const onMaterialCancel=()=>{
    state.saveVisible = false
    materials.value.stopLoding();
  }

watch(
    ()=>props.textList,
    (val)=>{
        state.textList = val
        state.baseTextList = val
    }
)

watch(
    ()=>props.fontList,
    (val)=>{
        state.fontList = val
        const find = state.fontList.find((item) => item.id_default == 1);

        let data = {
            font_name: find.name,
            font_path: find.material_path,
            font_style: find.font_style,
            font_family: find.font_family,
            font_url: find.material_url,
        }
        Object.assign(formState, data)

        val.forEach((font) => {
          const style = document.createElement("style");
          style.innerHTML = `
            @font-face {
            font-family: '${font.font_family}';
            src: url('${font.material_url}') format('truetype');
            }
          `;
          document.head.appendChild(style);
        });
    }
)

watch(
    ()=>props.presetStylesList,
    (val)=>{
    state.flowerArr = val?.result;
    state.flowerAliArr = val?.resultEffect;

    const is_default = val?.resultEffect.find(
    (ele) => ele.is_default == 1
    );

    formState.flower_id = is_default?.id
    }
)

watch(
    ()=>props.current,
    (val)=>{
        state.current = val
    }
)

watch(
    ()=>props.successData,
    (val)=>{

      // 通知子组件 像父组件提交数据
      const AiPhoneParams = AiPhoneRef.value?.getScalePosition()
      console.log(AiPhoneParams,'AiPhoneParams');
        const params = {
            font_config: {
            ...formState,
            },
            human_video_id: props.detailItem.id,
            job_id: state.job_id,
            text_y:AiPhoneParams.text_y
        }

        // 匹配大部分emoji的正则表达式（持续更新版本）
        const emojiRegex = /[\u{1F300}-\u{1F5FF}\u{1F600}-\u{1F64F}\u{1F680}-\u{1F6FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{FE00}-\u{FE0F}]/gu;

        // 更新文本内容
        editorRef.value.forEach((item, index) => {
            const content = item?.getContent()
            let text = content?.textData?.text || ''
            // 去除 emoji
            text = text.replace(emojiRegex, '')

            state.textList[index].content = text
        })

        params.output = state.textList
        if(props.type == 'materia'){
          params.merchant_folder_statck_id = state.materiaData.merchant_folder_statck_id
          params.multimedia_id = params.human_video_id
          delete params.human_video_id
        }
        setTimeout(()=>{
          // 将数据传给父组件
          emit('successChange',params)
        },50)
        
    }
)

watch(
  ()=>props.nextNum,
  (val)=>{
    state.current = val
  }
)



</script>

<style lang="less" scoped>
// 小标题字体颜色
@font_color: #42464e;
// 小图标字体大小
@font_size: 13px;

// 定制 tab的样式
:deep(.ss-tabs-nav-wrap){
.ss-tabs-nav-list{
  .ss-tabs-tab{
    padding-top: 0;
  }
}
}
.subtitleCreat {
  width: 100%;
  height: 450px;
  .content_box {
    height: 100%;
    width: 100%;
    display: flex;
    gap: 20px;
    .left_box {
      // background-color: rgba(135, 207, 235, 0.459);
      background-color: #000;
      height: 100%;

      .video_box {
        height: 100%;
        width: 400px;
        video {
          height: 100%;
          width: 100%;
        }
      }
    }

    .right_box {
      flex: 1;
      position: relative;
      &::-webkit-scrollbar {
        width: 8px; /* 滚动条的宽度 */
        height: 10px; /* 滚动条的高度，垂直滚动条可能用得上 */
      }
      &::-webkit-scrollbar-thumb {
        background: #c5c5c5; /* 滑块的背景颜色 */
        border-radius: 10px; /* 滑块的圆角 */
      }

      .title_step {
        position: sticky;
        left: 0;
        top: 0;
        z-index: 10;
        background-color: #fff;
      }

      // 获取字幕前的状态
      .not_textList {
        width: 100%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .btn_controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 20px;
        padding-right: 5px;
      }

      .text_list_box {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .text_list_item {
          width: 100%;
          padding-right: 5px;
          .title_msg {
            display: flex;
            align-items: center;
            gap: 20px;
          }
          .text_list_item_title {
            color: #333;
          }
          .textarea_box {
            &::-webkit-scrollbar {
              width: 4px; /* 滚动条的宽度 */
              height: 10px; /* 滚动条的高度，垂直滚动条可能用得上 */
            }
            &::-webkit-scrollbar-thumb {
              background: #c5c5c5; /* 滑块的背景颜色 */
              border-radius: 10px; /* 滑块的圆角 */
            }
          }
        }
      }

      .font_setting_item {
        display: flex;
        position: relative;
        align-items: center;
        margin-bottom: 20px;

        // 字体设置
        .font_setting_box {
          flex: 1;
          // max-width: 550px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          background-color: #f6f8fa;
          overflow-x: auto;
          overflow-y: hidden;

          &::-webkit-scrollbar {
            height: 4px;
            /* 滚动条的高度，垂直滚动条可能用得上 */
          }

          &::-webkit-scrollbar-thumb {
            background: #888;
            /* 滑块的背景颜色 */
            border-radius: 10px;
            /* 滑块的圆角 */
          }

          // 选择字体气泡框
          :deep(.ant-popover-inner-content) {
            padding: 0px;
          }

          // 字体大小数字input
          :deep(.ant-input-number) {
            background-color: transparent;
            border: none;
            width: 56px;
          }

          :deep(.ant-input-number-input) {
            text-align: center;
          }

          :deep(.zs-color-picker-panel) {
            margin-top: 16px;
            left: 0px;
          }

          .select_font_box {
            display: flex;
            flex-direction: column;
            height: 400px;
            overflow-y: auto;
            padding-right: 4px;

            &:hover {
              padding-right: 0;

              &::-webkit-scrollbar {
                display: block;
              }
            }

            &::-webkit-scrollbar {
              width: 4px;
              /* 滚动条的宽度 */
              height: 10px;
              /* 滚动条的高度，垂直滚动条可能用得上 */
              display: none;
            }

            &::-webkit-scrollbar-thumb {
              background: #888;
              /* 滑块的背景颜色 */
              border-radius: 10px;
              /* 滑块的圆角 */
            }

            .select_font_item {
              padding: 8px 16px;
              cursor: pointer;
              min-width: 157px;
              display: flex;
              align-items: center;
              justify-content: space-between;

              &:hover {
                background-color: #eeefef;
              }
            }

            .font_active {
              font-weight: 600;
            }
          }

          .font_settings_style {
            cursor: pointer;
            color: #0c0d0e;
            margin: 0 5px;
            padding: 3px;
            display: flex;
            align-items: center;
            //   flex: 1;
            width: 60%;
            justify-content: center;
            span {
              // max-width: 70px;
              margin-right: 5px;
              font-size: @font_size;
              // 不换行
              white-space: nowrap;
              // 省略号
              overflow: hidden;
              text-overflow: ellipsis;
            }

            &:hover {
              background-color: #eeefef;
            }
          }

          // 字体大小
          .font_settings_size {
            margin: 0 5px;
            height: 40px;
            line-height: 40px;
            display: flex;
            align-items: center;

            &:hover {
              background-color: #eeefef;
            }

            .change_btn {
              cursor: pointer;
              padding: 0 10px;
              color: @font_color;
              -webkit-user-select: none;
              /* Safari, Chrome 和 Opera */
              -moz-user-select: none;
              /* Firefox */
              -ms-user-select: none;
              /* Internet Explorer/Edge */
              user-select: none;
              /* 非前缀的版本, 应用于所有现代浏览器 */
            }
          }

          // 分割线
          .split_line {
            //   margin: 0 10px;
            height: 20px;
            width: 1px;
            background-color: #e2e2e2;
          }

          // 字体颜色和背景色
          .color_settings_box {
            display: flex;
            gap: 7px;

            .settings_color {
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 7px 7px;
              position: relative;
              border-radius: 5px;
              overflow: hidden;

              &:hover {
                & .del_bgc {
                  opacity: 1;
                }
              }

              .del_bgc {
                position: absolute;
                top: -5px;
                right: -5px;
                font-size: 22px;
                opacity: 0;

                &:hover {
                  color: red;
                }
              }

              &:hover {
                background-color: #eeefef;
                cursor: pointer;
              }

              .color_line {
                height: 2px;
                width: 60%;
                background-color: #000;
                position: absolute;
                bottom: 0px;
                left: calc(50% - 30%);
              }
            }
          }

          // 字体粗细倾斜和排列方式
          .font_settings_style_control {
            display: flex;
            align-items: center;
            gap: 10px;

            // 设置气泡框样式
            :deep(.ant-popover-inner-content) {
              padding: 0px;
            }

            .select_alignment {
              display: flex;

              span {
                padding: 5px;
                cursor: pointer;

                &:hover {
                  background-color: #eeefef;
                }
              }

              .active_alignment {
                background-color: #eeefef;
              }
            }

            .font_settings_style_itme {
              padding: 2px 7px;
              cursor: pointer;
              border-radius: 5px;
              overflow: hidden;

              &:hover {
                background-color: #eeefef;
              }
            }

            .is_active {
              background-color: #d8e7fc !important;
            }

            .alignment {
              display: flex;
              padding: 4px;
            }
          }
        }

        .font_style_title {
          color: @font_color;
          font-size: @font_size;
          padding-right: 15px;
          display: flex;
          // justify-content: start;
          align-self: flex-start;
          // 一行显示
          white-space: nowrap;
        }

        // 花字设置
        .font_style_box {
          .font_style_content_box {
            overflow-y: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            overflow: hidden;

            .font_style_content_item {
              border: 2px solid #ededee;
              cursor: pointer;
              border-radius: 8px;
              overflow: hidden;

              .font_img {
                width: 200px;
                height: 51px;
                object-fit: contain;
              }

              &:hover {
                border-color: #1664ff;
                background-color: #e8f7ff;
              }

              .font_style_content_item_text {
                width: 51px;
                font-size: 20px;
                line-height: 51px;
                text-align: center;
                margin: 0;
                font-weight: 900;
              }
            }

            .active_font_style {
              border-color: #1664ff;
            }
          }

          // 禁用
          .font_disabled {
            width: 51px;
            font-size: 32px;
            text-align: center;
          }

          // 折叠按钮
          .folding_panel {
            color: #737a87;
            text-align: center;
            width: 100%;
            display: block;
            cursor: pointer;
            margin-top: 15px;
          }
        }
      }

      .content{
        height: 400px;
        overflow: hidden auto;
      }
    }
  }
}
</style>
